
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Competition</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" />
    <link href="css/css.css" rel="stylesheet" types="text/css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <style>
        .card{
            margin-bottom: 10px;
        }
        /* 近期竞赛*/
        .ppjj .container {
            max-width: 1510px;
            width: 96%;
            background: #edebea;
        }
        .ppjj .container .home_top {
            max-width: 1200px;
            width: 80%;
            margin: 4.9% auto 2.3%;
        }
        @media (max-width: 480px) {
            .ppjj .container .home_top {
                width: 100%;
            }
        }
        .ppjj .container .home_top span {
            background: #d0cecd;
            width: 43%;
            height: 1px;
            display: inline-block;
            vertical-align: text-top;
        }
        @media (max-width: 980px) {
            .ppjj .container .home_top span {
                width: 40%;
            }
        }
        @media (max-width: 980px) {
            .ppjj .container .home_top span {
                width: 37%;
            }
        }
        @media (max-width: 480px) {
            .ppjj .container .home_top span {
                width: 30%;
            }
        }
        .ppjj .container .home_top a {
            display: inline-block;
            font-size: 36px;
            width: 14%;
            text-align: center;
            color: #353535;
        }
        @media (max-width: 1300px) {
            .ppjj .container .home_top a {
                font-size: 26px;
            }
        }
        @media (max-width: 980px) {
            .ppjj .container .home_top a {
                width: 20%;
            }
        }
        @media (max-width: 680px) {
            .ppjj .container .home_top a {
                width: 26%;
            }
        }
        @media (max-width: 480px) {
            .ppjj .container .home_top a {
                width: 40%;
            }
        }
        .ppjj .container .ppjj_con {
            max-width: 920px;
            width: 77%;
            margin: auto;
            text-align: center;
        }
        .ppjj .container .ppjj_con p {
            line-height: 26px;
            margin: 0px 0px 40px 0px;
        }
        .ppjj .container .ppjj_con .more {
            display: inline-block;
            width: 144px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            font-size: 16px;
            color: #ffffff;
            background: #a99269;
            margin-bottom: 15%;
        }
        .ppjj .container .ppjj_con .more:hover {
            background: #a8a39d;
        }
        .ppjj .container .quan_3 {
            width: 100%;
            background: #d6ccc3;
        }
        .ppjj .container .quan_3 ul {
            max-width: 920px;
            width: 77%;
            margin: auto;
        }
        .ppjj .container .quan_3 ul li {
            float: left;
            width: 28%;
            text-align: center;
            position: relative;
            padding-top: 38px;
            padding-bottom: 10px;
            margin-right: 8%;
        }
        @media (max-width: 640px) {
            .ppjj .container .quan_3 ul li {
                width: 100%;
                margin-right: 0px;
            }
        }
        .ppjj .container .quan_3 ul li span {
            display: inline-block;
            width: 64px;
            height: 64px;
            background: #ffffff;
            line-height: 64px;
            border-radius: 50%;
            color: #3e3e3e;
            font-family: tahoma;
            font-size: 34px;
            position: absolute;
            top: -34px;
            margin-left: -32px;
        }
        @media (max-width: 640px) {
            .ppjj .container .quan_3 ul li span {
                position: inherit;
                top: 0px;
                margin-left: 0px;
            }
        }
        .ppjj .container .quan_3 ul li h5 {
            font-size: 23px;
            color: #434343;
            line-height: 68px;
        }
        .ppjj .container .quan_3 ul li p {
            line-height: 25px;
            color: #696969;
        }
        .ppjj .container .quan_3 ul li:last-child {
            margin-right: 0px;
        }
    </style>
    <style>
        /*往期竞赛*/
        .vcenter {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            max-width: 100%;
            max-height: 100%;
            display: block;
            vertical-align: middle;
            margin: auto;
        }
        .ppcp .container {
            max-width: 1510px;
            width: 96%;
            background: #edecea url(../images/ppwh_bg.jpg) no-repeat;
            background-size: 100%;
        }
        .ppcp .container .s_xian {
            text-align: center;
            font-size: 29px;
            padding: 0px;
            margin: 0px;
            line-height: 25px;
            color: #5d5a57;
        }
        .ppcp .container .home_top {
            max-width: 1200px;
            width: 80%;
            margin: 2.3% auto 4.5%;
        }
        @media (max-width: 480px) {
            .ppcp .container .home_top {
                width: 100%;
            }
        }
        .ppcp .container .home_top span {
            background: #d0cecd;
            width: 43%;
            height: 1px;
            display: inline-block;
            vertical-align: text-top;
        }
        @media (max-width: 980px) {
            .ppcp .container .home_top span {
                width: 40%;
            }
        }
        @media (max-width: 980px) {
            .ppcp .container .home_top span {
                width: 37%;
            }
        }
        @media (max-width: 480px) {
            .ppcp .container .home_top span {
                width: 30%;
            }
        }
        .ppcp .container .home_top a {
            display: inline-block;
            font-size: 36px;
            width: 14%;
            text-align: center;
            color: #353535;
        }
        @media (max-width: 1300px) {
            .ppcp .container .home_top a {
                font-size: 26px;
            }
        }
        @media (max-width: 980px) {
            .ppcp .container .home_top a {
                width: 20%;
            }
        }
        @media (max-width: 680px) {
            .ppcp .container .home_top a {
                width: 26%;
            }
        }
        @media (max-width: 480px) {
            .ppcp .container .home_top a {
                width: 40%;
            }
        }
        .ppcp .container .tu_all {
            max-width: 1200px;
            width: 80%;
            margin: auto;
            background: url(../images/ppcp_bg.png) repeat-y;
            background-size: 100%;
            padding-top: 4.4%;
            padding-bottom: 4.4%;
        }
        @media (max-width: 991px) {
            .ppcp .container .tu_all {
                background: none;
            }
        }
        @media (max-width: 640px) {
            .ppcp .container .tu_all {
                width: 100%;
            }
        }
        .ppcp .container .tu_all ul {
            max-width: 1160px;
            margin-left: 40px;
        }
        @media (max-width: 991px) {
            .ppcp .container .tu_all ul {
                margin-left: 0px;
            }
        }
        .ppcp .container .tu_all ul li {
            width: 25%;
            float: left;
            cursor: pointer;
        }
        @media (max-width: 1200px) {
            .ppcp .container .tu_all ul li {
                width: 33.333333333333336%;
            }
        }
        @media (max-width: 991px) {
            .ppcp .container .tu_all ul li {
                width: 50%;
            }
        }
        @media (max-width: 480px) {
            .ppcp .container .tu_all ul li {
                width: 100%;
            }
        }
        .ppcp .container .tu_all ul li img {
            transition: 0.3s;
        }
        .ppcp .container .tu_all ul li .zi_div {
            color: #957f58;
            text-align: center;
            padding-top: 15%;
        }
        @media (max-width: 480px) {
            .ppcp .container .tu_all ul li .zi_div {
                padding-top: 0%;
            }
        }
        .ppcp .container .tu_all ul li .zi_div h4 {
            font-size: 30px;
            font-family: 宋体;
            line-height: 40px;
        }
        .ppcp .container .tu_all ul li .zi_div h5 {
            font-family: tahoma;
            font-size: 15px;
            line-height: 25px;
        }
        .ppcp .container .tu_all ul li .zi_div span {
            width: 30%;
            height: 2px;
            display: inline-block;
            background: #957f58;
        }
        .ppcp .container .tu_all ul li .pic {
            position: relative;
            overflow: hidden;
        }
        .ppcp .container .tu_all ul li .pic:after {
            content: "";
            padding-bottom: 50.4%;
            display: block;
        }
        .ppcp .container .tu_all ul li .pic .zhe {
            background: #a99269;
            position: absolute;
            top: 0px;
            left: 0px;
            padding-bottom: 50.4%;
            width: 100%;
            background-color: rgba(169, 146, 105, 0.8);
            display: none;
        }
        .ppcp .container .tu_all ul li .pic .zhe a{
            position: relative;
            color: #fff;
            display: block;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-top: 9%;
            white-space: nowrap;
            overflow: hidden;
            padding: 0px 0px;

        }
        .ppcp .container .tu_all ul li:hover img {
            transform: scale(1.2);
        }
        .ppcp .container .tu_all ul li:hover .zhe {
            display: block;
        }
        .ppcp .container .tu_all ul li:hover .zhe img {
            transform: scale(1);
        }
        img{
            width: 100%;
        }

    </style>
    <style>
        /* 我参与的竞赛 */
        .pc_nav dl{
            height: 190px;
            width: 15%;
            background: url(images/about_bg_4.jpg);
            position: fixed;
            left: 0px;
            bottom: 0px;
            float: left;
            border-radius: 15px ;
        }
        .pc_nav dt{
            text-align: center;
            margin-top: 20px;
        }
        .pc_nav dd{
            text-align: left;
            margin-left: 20%;
            padding:5px 0;display:block;color:#333;
        }
        .competition img {
            transition: 0.3s;
        }
        .competition :hover img {
            transform: scale(1.2);
        }

        .competition :hover img {
            transform: scale(1);
        }
        img{
            width: 100%;
            width: 250px;
            height: 400px;
        }



    </style>
    <style>
        /* 更多竞赛 */
        #One{background-color: #F2F2F2;border-radius: 15px; width: 50%; align-content: center;}
        /* .bd { background-color: #FFFFFF;width: 50%;margin: 2px;} */
        /* .bd ul li a{ padding-left: 20px;} */
        .bd ul{ padding: 10px 0 5px 0;}
        .bd ul li { margin-top: 20px; height: 20px; line-height: 20px; border-bottom: 1px solid #dfdfdf; font-size: 14px; display: block; margin : 15px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;text-align: left; }
    </style>
</head>
<body>
<header class="navbar-fixed-top headerbg">
    <div class="container-fluid">
        <div class="logo">
            <h3><a href="#"><span>朋心合力</span></a></h3>
        </div>
        <th:block th:include=" base.html :: topnav"></th:block>
    </div>
</header>
<div class="bannerN animated" style="background-image: url(Lookingimg/gs_bg_02.png);">
    <div class="imgFull"><img src="Lookingimg/gs_bg_02.png" class="img-responsive"></div>
    <h2 class="banH2 wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">竞赛</h2>
    <h3 class="wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
        通过不断的努力不断的专研，研发出专业的软件</h3>
    <div class="sky">
        <div class="clouds_one"></div>
        <div class="clouds_two"></div>
        <div class="clouds_three"></div>
    </div>
</div>
<div class="ppjj">
    <div class="container">
        <div class="home_top">
            <span></span><a>近期竞赛</a><span></span>
        </div>

        <!-- 竞赛1 -->
        <div class="quan_3">

            <div class="pc_nav fr clearfix">
                <dl>
                    <dt class="on"><a href="index.html">我参加的比赛</a></dt><br/>
                    <dd ><a href="pro.html">第 263 场周赛</a></dd>
                    <dd ><a href="pro.html">第 263 场周赛</a></dd>
                    <dd ><a href="pro.html">第 263 场周赛</a></dd>
                    <dd ><a href="pro.html">第 263 场周赛</a></dd>

                </dl>
            </div>


            <ul class="clearfix competition">
                <li class="wow rollIn"  data-wow-delay="0.5s">
                    <span class="quan">2</span>
                    <div class="ui special cards">
                        <div class="card The-second">
                            <div class="blurring dimmable image">
                                <div class="ui dimmer" >
                                    <div class="content">
                                        <div class="center">
                                            <div class="ui inverted button">Add to timeline</div>
                                        </div>
                                    </div>
                                </div>
                                <img src="./pro/1.jpg">
                            </div>
                            <div class="content">
                                <a class="header">Team Fu</a>
                                <div class="meta">
                                    <p class="date">Create in Sep 2014</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <a>
                                    <i class="users icon"></i>
                                    2 Members<!--参与人数-->
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li  class="wow rollIn" >
                    <span class="quan">1</span>
                    <div class="ui special cards">
                        <div class="card The-firth">
                            <div class="blurring dimmable image">
                                <div class="ui dimmer">
                                    <div class="content">
                                        <div class="center">
                                            <div class="ui inverted button">Add to timeline</div>
                                        </div>
                                    </div>
                                </div>
                                <img src="./pro/1.jpg">
                            </div>
                            <div class="content">
                                <a class="header">Team Fu</a>
                                <div class="meta">
                                    <p class="date">Create in Sep 2014</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <a>
                                    <i class="users icon"></i>
                                    2 Members
                                </a>
                            </div>
                        </div>
                    </div>
                </li>
                <li  class="wow rollIn" data-wow-delay="1s">
                    <span class="quan">3</span>
                    <div class="ui special cards">
                        <div class="card The-third">
                            <div class="blurring dimmable image">
                                <div class="ui dimmer">
                                    <div class="content">
                                        <div class="center">
                                            <div class="ui inverted button">Add to timeline</div>
                                        </div>
                                    </div>
                                </div>
                                <img src="./pro/1.jpg">
                            </div>
                            <div class="content">
                                <a class="header">Team Fu</a>
                                <div class="meta">
                                    <p class="date">Create in Sep 2014</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <a>
                                    <i class="users icon"></i>
                                    2 Members
                                </a>
                            </div>
                        </div>
                    </div>
                    <script>
                        $('.special.cards .image').dimmer({
                            on: 'hover'
                        });
                    </script>
                </li>
            </ul>
        </div>
        <div align="center">
            <div class="bd " id="One">
                <ul >
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                    <li><a href="#">怀化人大财经委领导一行莅临亚洲富士考察</a></li>
                </ul>
            </div>
        </div>
        <!-- 往期竞赛 -->


        <div class="ppcp">
            <div class="container">
                <div class="s_xian">|</div>
                <div class="home_top">
                    <span></span><a>往期竞赛</a><span></span>
                </div>
                <div class="tu_all">
                    <ul class="clearfix">
                        <li class="wow bounceIn">
                            <div class="zi_div">
                                <h4>往届竞赛回顾</h4>
                                <h5>Review of previous competitions</h5>
                                <span></span>
                            </div>
                        </li>
                        <li class="wow bounceIn">
                            <div class="pic">
                                <a href="pro.html">
                                    <img src="img/1.jpg" alt="" class="vcenter tu_fa"/>
                                </a>
                                <div class="zhe">
                                    <a href="pro.html">第 263 场周赛</a>
                                    <a class=“data">日期：2019-1-1</a>
                                    <a class="timed">时长为：1小时30分钟</a>
                                </div>
                            </div>
                        </li>
                        <li class="wow bounceIn">
                            <div class="pic">
                                <a href="pro.html">
                                    <img src="img/1.jpg" alt="" class="vcenter tu_fa"/>
                                </a>
                                <div class="zhe">
                                    <a href="pro.html">第 263 场周赛</a>
                                    <a class=“data">日期：2019-1-1</a>
                                    <a class="timed">时长为：1小时30分钟</a>
                                </div>
                            </div>
                        </li>
                        <li class="wow bounceIn">
                            <div class="pic">
                                <a href="pro.html">
                                    <img src="img/1.jpg" alt="" class="vcenter tu_fa"/>
                                </a>
                                <div class="zhe">
                                    <a href="pro.html">第 263 场周赛</a>
                                    <a class=“data">日期：2019-1-1</a>
                                    <a class="timed">时长为：1小时30分钟</a>
                                </div>
                            </div>
                        </li>
                        <li class="wow bounceIn">
                            <div class="pic">
                                <a href="pro.html">
                                    <img src="img/1.jpg" alt="" class="vcenter tu_fa"/>
                                </a>
                                <div class="zhe">
                                    <a href="pro.html">第 263 场周赛</a>
                                    <a class=“data">日期：2019-1-1</a>
                                    <a class="timed">时长为：1小时30分钟</a>
                                </div>
                            </div>
                        </li>
                        <li class="wow bounceIn">
                            <div class="pic">
                                <a href="pro.html">
                                    <img src="img/1.jpg" alt="" class="vcenter tu_fa"/>
                                </a>
                                <div class="zhe">
                                    <a href="pro.html">第 263 场周赛</a>
                                    <a class=“data">日期：2019-1-1</a>
                                    <a class="timed">时长为：1小时30分钟</a>
                                </div>
                            </div>
                        </li>
                        <li class="wow bounceIn">
                            <div class="pic">
                                <a href="pro.html">
                                    <img src="img/1.jpg" alt="" class="vcenter tu_fa"/>
                                </a>
                                <div class="zhe">
                                    <a href="pro.html">第 263 场周赛</a>
                                    <a class=“data">日期：2019-1-1</a>
                                    <a class="timed">时长为：1小时30分钟</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footerBg">
    <div class="container" style="margin:0 100px ">
        <div class="ptb40">
            <div class="footTopL" style="width: 1300px">
                <dl class="clearfix" style="width: 400px; margin-left: 60px;">
                    <dt>关于我们</dt>
                    <dd><a href="#">联系地址</a></dd>
                    <dd><a href="#">荣誉资质</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>系统团队</dt>
                    <dd><a href="#">林某</a></dd>
                    <dd><a href="#">李某</a></dd>
                    <dd><a href="#">蔡某</a></dd>
                    <dd><a href="#">周某</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 100px;">
                    <dt>培训中心</dt>
                    <dd><a href="#">java类培训</a></dd>
                    <dd><a href="#">c/c++类培训</a></dd>
                    <dd><a href="#">Python类培训</a></dd>
                    <dd><a href="#">go语言类培训</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>权限介绍</dt>
                    <dd><a href="#">队长权限</a></dd>
                    <dd><a href="#">队员权限</a></dd>
                    <dd><a href="#">惩罚机制</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="CopyRight">
        <div class="container"><span class="CopyRight_name" style="font-size: 50px;float: left">朋心合力</span><span
                class="CopyRight_name">朋心合力平台版权所有</span></div>
    </div>
</footer>
<!-- 参与的比赛浮窗 -->

<script>
    var The_Html='';
    // 点击card把比赛添加到我参与的比赛里
    // 渲染近期竞赛、往期竞赛、我参与的竞赛
    $(function(){
        console.log("1");
        // $(".card").click(function(){
        //近期竞赛
        $.ajax({
            //请求方式
            type:'GET',
            //发送请求的地址以及传输的数据
            url:'http://rap2api.taobao.org/app/mock/292073/course',
            //服务器返回的数据类型
            dataType:'json',
            success:function(data){
                //请求成功函数内容
                console.log("22")

                datas = data.result
                $.each(datas,function(i,v){
                    The_Image= `<img src="${v.image}">`;
                    The_data = `<a class="header">${v.courseName}</a>
									<div class="meta">
										<p class="date">${v.createTime}</p>
									</div>`;
                    The_members=`<a>
										<i class="users icon"></i>
										${v.Timed}Members
									  </a>`;
                    $(".competition").children().eq(i).children().eq(1).children().children().eq(0).html(The_Image);
                    $(".competition").children().eq(i).children().eq(1).children().children().eq(1).html(The_data);
                    $(".competition").children().eq(i).children().eq(1).children().children().eq(2).html(The_members);
                })


            },
            error:function(jqXHR){
                //请求失败函数内容
                console.log("报错啦");
            }
        });
        //往期竞赛
        $.ajax({
            //请求方式
            type:'GET',
            //发送请求的地址以及传输的数据
            url:'http://rap2api.taobao.org/app/mock/292073/course',
            //服务器返回的数据类型
            dataType:'json',
            success:function(data){

                //请求成功函数内容
                console.log(data.result);

                datas = data.result
                $.each(datas,function(i,v){
                    The_Html= `<div class="pic">
									<a href="pro.html">
										<img src="${v.image}" alt="" class="vcenter tu_fa"/>
									</a>
									<div class="zhe">
										<a href="pro.html">${v.courseName}</a>
										<a class=“data">日期：${v.createTime}</a>
										<a class="timed">时长为：${v.Timed}分钟</a>
									</div>
								</div>
						`;
                    $(".tu_all").children().children().eq(i+1).html(The_Html);
                    // console.log($(".competition").children().eq(i).children().eq(1).html());
                })


            },
            error:function(jqXHR){
                //请求失败函数内容
                console.log("报错啦");
            }
        });
        //我参与的比赛
        $.ajax({
            //请求方式
            type:'GET',
            //发送请求的地址以及传输的数据
            url:'http://rap2api.taobao.org/app/mock/292073/course',
            //服务器返回的数据类型
            dataType:'json',
            success:function(data){
                //请求成功函数内容
                console.log(data.result);

                datas = data.result
                $.each(datas,function(i,v){
                    The_Html= `<a href="${v.courseLink}">${i}、${v.courseName}</a>
						`;
                    $(".pc_nav").children().children().eq(i+1).html(The_Html);
                })


            },
            error:function(jqXHR){
                //请求失败函数内容
                console.log("报错啦");
            }
        });

    });

</script>

<script src="js/wow.min.js"></script>
<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new WOW().init();
    };
</script>

</body>
</html>
